<template>
  <dir>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" title="全部分类">
        <van-tree-select height="55vw" :items="option" :main-active-index.sync="active" :active-id.sync="activeId">
          <template #content>
            <ul>
              <li v-if="active === 0">全部分类</li>
              <li v-if="active === 1">自由行</li>
              <li v-if="active === 2">跟团游</li>
              <li v-if="active === 3">半自助游</li>

            </ul>
          </template>
        </van-tree-select>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="综合排序" :options="option2" />
      <van-dropdown-item title="品质/价格" ref="item">
        <div class="travelQuality">
          <span style="font-size:16px">出行品质</span>
          <div>
            <van-button plain type="info" style="transform: scale(0.7);">5钻豪华型</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">4钻豪华型</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">3钻豪华型</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">2钻豪华型</van-button>
          </div>
        </div>
        <div class="travelQuality2">
          <div class="title">自定义价格区间</div>
          <input :type="text" placeholder="0       元">~
          <input :type="text" placeholder="99999   元 ">
          <van-button plain type="info" style="margin:10px; line-height: 100px; ">清除</van-button>
          <van-button color="#00BCD4">单色按钮</van-button>
        </div>

      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item">

        <div class="travelQuality">
          <span style="font-size:16px">交通方式</span>
          <div>
            <van-button plain type="info" style="transform: scale(0.7);">不限</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">中转航班</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">直飞往返</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">邮轮</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">不含交通</van-button>
          </div>
        </div>
        <div class="travelQuality">
          <span style="font-size:16px">精品推荐</span>
          <div>
            <van-button plain type="info" style="transform: scale(0.7);">不限</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">自营</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">品牌</van-button>

          </div>
        </div>
        <div class="travelQuality">
          <span style="font-size:16px">特惠促销</span></span>
          <div>
            <van-button plain type="info" style="transform: scale(0.7);">不限</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">专享红包</van-button>
            <van-button plain type="info" style="transform: scale(0.7);">团购</van-button>

          </div>
        </div>
        <div class="travelQuality2">
          <div class="titles">服务保障（多选）</div>
          <van-checkbox-group v-model="result">
            <van-checkbox name="a" shape="square">不限</van-checkbox>
            <van-checkbox name="b" shape="square">
              <div>
                <div>铁定出行</div>
                <div class="titles">不受人数限制，购买成功即可创团</div>
              </div>
            </van-checkbox>
            <van-checkbox name="b" shape="square">
              <div>
                <div>及时确认</div>
                <div class="titles">直接购买无需商家再次确认库存</div>
              </div>
            </van-checkbox>
            <van-checkbox name="b" shape="square">
              <div>
                <div>如实描述</div>
                <div class="titles">产品内容真实有效，无虚假宣传</div>
              </div>
            </van-checkbox>
            <van-checkbox name="b" shape="square">
              <div>
                <div>无自费项目</div>
                <div class="titles">无附加或强制消费，无歧视性收费</div>
              </div>
            </van-checkbox>
          </van-checkbox-group>





          <van-button plain type="info" style="margin:10px; line-height: 100px; ">清除</van-button>
          <van-button color="#00BCD4">确定</van-button>
        </div>

      </van-dropdown-item>
    </van-dropdown-menu>
  </dir>
</template>

<script>
export default {
  data() {
    return {
      // 全部分类的数据
      value: 0,
      active: 0,
      activeId: 1,
      option: [//全部分类的数据
        { text: '全部分类', value: 0 },
        { text: '自由行', value: 1 },
        { text: '跟团游', value: 2 },
      ],
      // 综合排序的数据
      value2: 0,
      option2: [//综合排序的数据
        { text: '综合排序', value: 0 },
        { text: '销量高到低', value: 1 },
        { text: '价格低到高', value: 2 },
        { text: '价格高到低', value: 3 },
        { text: '评分高到低', value: 4 },

      ],
      //筛选价格
      text: '',
      //复选框
      result: ['a', 'b'],
    };
  },

}
</script>

<style scoped lang="scss">
.travelQuality {
  padding: 10px;
}

.travelQuality2 {
  padding: 10px;

  .title {
    padding: 10px;
  }

  input {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 10px;
  }
}

.titles {
  font-size: 10px;
}
</style>